<template>
  <div class="my-order">
    <van-nav-bar fixed title="我的订单" left-arrow @click-left="$router.push('/my')" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list :finished="finished" finished-text="没有更多了" @load="getOrders"
      style="padding-bottom: 20px; margin-top:15%;">
      <van-cell-group inset v-for="order in orders" class="order-list">
        <van-cell title="订单号" value="order">
          <template #value>
            <span class="custom-title">{{ order.orderId }}</span>
          </template>
        </van-cell>
        <van-cell title="日期">
          <template #value>
            <span class="custom-title">{{ order.orderDate }}</span>
          </template>
        </van-cell>
        <van-cell title="总价">
          <template #value>
            <span class="custom-title">{{ order.totalPrice }}</span>
          </template>
        </van-cell>
        <van-cell title="状态">
          <template #value>
            <span class="custom-title">{{ order.status === 'P' ? '未发货' : '已发货' }}</span>
          </template>
        </van-cell>
        <van-cell>
          <template #value>
            <van-button round @click="onShowDetails(order.orderId)" color="#FFDF75" style="height:40px; font-weight:700;">查看详情</van-button>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
    </van-pull-refresh>
    <van-back-top style="opacity: 80%; background-color: #FFAC00; user-select:none;"><van-icon name="arrow-up"
        style="color: blanchedalmond;" /></van-back-top>
        <van-dialog
        v-model:show="showDetails"
        title="订单"
    >
      <div class="scrollable-content">
        <van-cell-group title="支付信息" inset>
          <p>卡类型: {{ order.cardType }}</p>
          <p>卡号: {{ order.creditCard }}</p>
          <p>有效期限: {{ order.expiryDate }}</p>
        </van-cell-group>
        <van-cell-group title="账单地址" inset>
          <p>名: {{ order.billToFirstName }}</p>
          <p>姓: {{ order.billToLastName }}</p>
          <p>地址1: {{ order.billAddress1 }}</p>
          <p>地址2: {{ order.billAddress2 }}</p>
          <p>城市: {{ order.billCity }}</p>
          <p>州/省: {{ order.billState }}</p>
          <p>邮政编码: {{ order.billZip }}</p>
          <p>国家: {{ order.billCountry }}</p>
        </van-cell-group>
        <van-cell-group title="送货地址"  inset>
          <p>名: {{ order.shipToFirstName }}</p>
          <p>姓: {{ order.shipToLastName }}</p>
          <p>地址1: {{ order.shipAddress1 }}</p>
          <p>地址2: {{ order.shipAddress2 }}</p>
          <p>城市: {{ order.shipCity }}</p>
          <p>州/省: {{ order.shipState }}</p>
          <p>邮政编码: {{ order.shipZip }}</p>
          <p>国家: {{ order.shipCountry }}</p>
        </van-cell-group>
        <van-cell-group v-for="(item, index) in order.lineItems" :key="index" :title="index+1" class="cart-item"  inset>
          <p>商品ID: {{ item.itemId}}</p>
          <p>数量: {{ item.quantity }}</p>
          <p>单价: {{ item.listPrice }}</p>
        </van-cell-group>
        <van-cell-group>
          <van-cell title="总费用:" :value="order.totalPrice"  />
        </van-cell-group>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { getOrderService } from '@/api/order';
import { getOrdersService } from '@/api/user';
import { onMounted, ref } from 'vue';

onMounted(() => {
  getOrders();
});

const isLoading = ref(false); //是否在刷新
const showDetails = ref(false); //是否展示订单详情

const order = ref({
  cardType: '',
  creditCard: '',
  expiryDate: '',
  billToFirstName: '',
  billToLastName: '',
  billAddress1: '',
  billAddress2: '',
  billCity: '',
  billState: '',
  billZip: '',
  billCountry: '',
  shipToFirstName: '',
  shipToLastName: '',
  shipAddress1: '',
  shipAddress2: '',
  shipCity: '',
  shipState: '',
  shipZip: '',
  shipCountry: '',
  totalPrice: 0,
}
);

const orders = ref([
  {
    orderId: 0,
    orderDate: "string",
    totalPrice: "string",
    status: "st"
  }
]);

//刷新
const onRefresh = () => {
      setTimeout(() => {
        getOrders();
        showToast({
          message: `<div style="height:22px;display:flex;justify-content: center;align-items: center;user-select:none;"><i class="van-icon van-icon-success" style="font-size:16px;margin-right:5px"></i><span>刷新成功</span></div>`,
          type: 'html'
        });
        isLoading.value = false;
      }, 1000);
    };

const getOrders = async () => {
  let result = await getOrdersService();
  orders.value = result.data.data.reverse();
}

//显示订单详情弹窗
const onShowDetails = async (orderId)=> {
  const result = await getOrderService(orderId);
  order.value = result.data.data;
  showDetails.value = true;
};
</script>

<style scoped>  
.my-order {
  padding-bottom: 12%;
  ::v-deep .van-icon-arrow-left {
    color: #333;
  }
}
.van-nav-bar {
  background-color: #FFDF75;
}
.van-cell {
  background-color: var(--van-card-background);
}
.order-list {
  border-radius: 2ch;
  margin: 20px;
  border-bottom: 5px solid #ebedf0; /* 底部边框 */
}
.scrollable-content {
  max-height: 60vh; /* Adjust the maximum height as needed */
  overflow-y: auto;
  text-align: left;
}
</style>
